<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>05CSS텍스트</title>
		<style type="text/css">
			@font-face {
  				font-family: 'Nanum Myeongjo';
  				font-style: normal;
  				font-weight: 800;
  				src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanummyeongjo/v2/NanumMyeongjo-ExtraBold.eot);
  				src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanummyeongjo/v2/NanumMyeongjo-ExtraBold.eot?#iefix) format('embedded-opentype'),
   				     url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanummyeongjo/v2/NanumMyeongjo-ExtraBold.woff2) format('woff2'),
      				 url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanummyeongjo/v2/NanumMyeongjo-ExtraBold.woff) format('woff'),
      				 url(//themes.googleusercontent.com/static/fonts/earlyaccess/nanummyeongjo/v2/NanumMyeongjo-ExtraBold.ttf) format('truetype');
			
			}
			@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
			@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
			@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
			@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
			@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
			@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);


			
			#t01{
				font-family: 'Nanum Brush Script', cursive;
			}
				#t02{
				font-family: 'Nanum Myeongjo';
			}
				#t03{
				font-family: 'Hanna', serif;
			}
				#t04{
				font-family: 'Nanum Gothic Coding', monospace;
			}
				#t05{
				font-family: 'Nanum Myeongjo', serif;
			}
			#t06{
				font-family: 'Nanum Gothic', sans-serif;

			}
				#t07{
				font-family: 'Nanum Pen Script', cursive;

			}
			



		</style>
	</head>

	<body>
		<h1>05CSS텍스트</h1>
		<h2>글자크기 :font-size</h2>
		<p style="font-size:1em">이것은 100% 정도의 크기 입니다.</p>
		<p style="font-size:1.5em">이것은 150% 정도의 크기 입니다.</p>
		
		<hr/>
		<h2>글꼴 지정:font-family</h2>
		<p style="font-family: 궁서">궁서체로 지정</p>
		<p >font-face:지정한 글꼴이 설치되어 있지 않으면 직접 다운로드해서 사용함</p>
		<p id="t01">@font-face : 상업적 글꼴 제공시 사용<br/>
		글꼴 서버에서 글꼴을 다운로드함</p>
		<p id="t02">@font-face : 상업적 글꼴 제공시 사용<br/>
		글꼴 서버에서 글꼴을 다운로드함</p>
		<p id="t03">@font-face : 상업적 글꼴 제공시 사용<br/>
		글꼴 서버에서 글꼴을 다운로드함</p>
		<p id="t04">@font-face : 상업적 글꼴 제공시 사용<br/>
		글꼴 서버에서 글꼴을 다운로드함</p>
		<p id="t05">@font-face : 상업적 글꼴 제공시 사용<br/>
		글꼴 서버에서 글꼴을 다운로드함</p>
		<p id="t06">@font-face : 상업적 글꼴 제공시 사용<br/>
		글꼴 서버에서 글꼴을 다운로드함</p>
		<p id="t07">@font-face : 상업적 글꼴 제공시 사용<br/>
		글꼴 서버에서 글꼴을 다운로드함</p>
		<p>웹 글꼴은 비영리로 구글에서 제공하고 있음 google.com/fonts</p>
		
		<hr />
		<h2>글꼴 모양, 굵기</h2>
		<p style="font-style: italic">글꼴 모양은normal,italic등이 있음</p>
		<p style="font-weight: bold">글꼴 굵기는 bold등이 있음등이 있음</p>

		<hr />
		<h2>글꼴 정렬하기 : text-align</h2>
		<p style="text-align: right">오른쪽 정렬</p>
		<p style="text-align: left">왼쪽 정렬</p>
		<p style="text-align: center">가운데 정렬</p>
			
		<hr />
		<h2>줄 간격 지정:line-height</h2>
		<p style="line-height: 100px">
			123124<br />
			123124<br />
			123124<br />
			123124<br />
			123124<br />
			123124<br />
			
		</p>
		<hr/>
		<h2>글꼴 꾸미기:text-decoration</h2>
		<p style="text-decoration:underline ">글꼴 꾸미기:밑줄</p>
		<p style="text-decoration:overline ">글꼴 꾸미기:윗줄</p>
		<p style="text-decoration:line-through ">글꼴 꾸미기:취소선</p>
		<p style="text-decoration:blink ">글꼴 꾸미기:깜빡임</p>
		
		<hr />
		<h2>그림자 효과 : text-shadow</h2>
		<p>text-shadow : 그림자시작점1x축() 그림자시작y축 흐림정도   그림자 색상</p>
		<p style="text-shadow: 5px 5px 0 red; font-size: 2em; font-weight: bold">그림자 속성</p>
		
		
	</body>
</html>
